<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <view class="back-button" @click="goBack">
          <text class="back-icon fas fa-arrow-left"></text>
        </view>
        <text class="header-title">营销中心</text>
        <view class="history-button">
          <text class="history-icon fas fa-history"></text>
        </view>
      </view>
    </view>

    <!-- Marketing Stats -->
    <view class="stats-section">
      <view class="stats-container">
        <view class="stats-grid">
          <view class="stat-item">
            <text class="stat-number">¥12,580</text>
            <text class="stat-label">本月营销收益</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">3,256</text>
            <text class="stat-label">新增客户</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">28.5%</text>
            <text class="stat-label">转化率提升</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Scrollable Content -->
    <scroll-view class="main-content" scroll-y="true">
      <!-- Promotion Tools -->
      <view class="section">
        <view class="section-header">
          <view class="title-bar"></view>
          <text class="section-title">营销工具</text>
        </view>
        <view class="tools-grid">
          <!-- Flash Sale -->
          <view class="tool-card flash-sale-card">
            <view class="card-header">
              <text class="card-icon fas fa-percentage"></text>
              <view class="hot-tag">热门</view>
            </view>
            <text class="card-title">限时秒杀</text>
            <text class="card-desc">提升销量神器</text>
            <button class="card-button flash-sale-btn" @click="createFlashSale">立即创建</button>
          </view>

          <!-- Coupon -->
          <view class="tool-card coupon-card">
            <view class="card-header">
              <text class="card-icon fas fa-ticket-alt"></text>
              <view class="recommend-tag">推荐</view>
            </view>
            <text class="card-title">优惠券</text>
            <text class="card-desc">提高复购率</text>
            <button class="card-button coupon-btn" @click="distributeCoupon">发放优惠券</button>
          </view>

          <!-- Group Buying -->
          <view class="tool-card group-card">
            <view class="card-header">
              <text class="card-icon fas fa-users"></text>
            </view>
            <text class="card-title">拼团活动</text>
            <text class="card-desc">社交裂变利器</text>
            <button class="card-button group-btn" @click="createGroupBuying">创建拼团</button>
          </view>

          <!-- Full Reduction -->
          <view class="tool-card reduction-card">
            <view class="card-header">
              <text class="card-icon fas fa-gift"></text>
            </view>
            <text class="card-title">满减活动</text>
            <text class="card-desc">提高客单价</text>
            <button class="card-button reduction-btn" @click="setFullReduction">设置满减</button>
          </view>
        </view>
      </view>

      <!-- Active Campaigns -->
      <view class="section">
        <view class="section-header">
          <view class="title-bar"></view>
          <text class="section-title">进行中的活动</text>
          <view class="view-all" @click="viewAllActivities">
            <text class="view-all-text">查看全部</text>
            <text class="view-all-icon fas fa-chevron-right"></text>
          </view>
        </view>
        <view class="campaigns-list">
          <!-- Campaign 1 -->
          <view class="campaign-card">
            <view class="campaign-header">
              <view class="campaign-info">
                <view class="campaign-tag flash-tag">
                  <text class="tag-icon fas fa-fire"></text>
                  <text class="tag-text">秒杀</text>
                </view>
                <text class="campaign-time">剩余2天3小时</text>
              </view>
              <switch :checked="true" class="campaign-switch" />
            </view>
            <text class="campaign-title">新年特惠秒杀</text>
            <view class="campaign-stats">
              <text class="stat-text">参与商品: 15个</text>
              <text class="stat-text">已售: 186件</text>
              <text class="stat-text">转化率: 32.5%</text>
            </view>
            <view class="campaign-actions">
              <button class="action-btn detail-btn" @click="viewActivityDetail('flash-sale-001')">查看详情</button>
              <button class="action-btn edit-btn" @click="editActivity('flash-sale-001')">编辑活动</button>
            </view>
          </view>

          <!-- Campaign 2 -->
          <view class="campaign-card">
            <view class="campaign-header">
              <view class="campaign-info">
                <view class="campaign-tag coupon-tag">
                  <text class="tag-icon fas fa-ticket-alt"></text>
                  <text class="tag-text">优惠券</text>
                </view>
                <text class="campaign-time">长期有效</text>
              </view>
              <switch :checked="true" class="campaign-switch" />
            </view>
            <text class="campaign-title">新客专享优惠券</text>
            <view class="campaign-stats">
              <text class="stat-text">满100减20</text>
              <text class="stat-text">已领: 523张</text>
              <text class="stat-text">使用率: 68.2%</text>
            </view>
            <view class="campaign-actions">
              <button class="action-btn detail-btn" @click="viewActivityDetail('coupon-002')">查看详情</button>
              <button class="action-btn edit-btn" @click="editActivity('coupon-002')">编辑活动</button>
            </view>
          </view>
        </view>
      </view>

      <!-- Live Streaming -->
      <view class="section">
        <view class="section-header">
          <view class="title-bar"></view>
          <text class="section-title">直播带货</text>
          <view class="view-all">
            <text class="view-all-text">预约直播</text>
            <text class="view-all-icon fas fa-chevron-right"></text>
          </view>
        </view>
        <view class="live-card">
          <view class="live-header">
            <view class="live-info">
              <text class="live-title">开启直播带货</text>
              <text class="live-desc">实时互动，提升转化率300%</text>
            </view>
            <view class="live-icon-container">
              <text class="live-icon fas fa-video"></text>
            </view>
          </view>
          <view class="live-stats">
            <view class="live-stat-item">
              <text class="live-stat-number">12.3万</text>
              <text class="live-stat-label">累计观看</text>
            </view>
            <view class="live-stat-item">
              <text class="live-stat-number">¥58.6万</text>
              <text class="live-stat-label">直播销售额</text>
            </view>
            <view class="live-stat-item">
              <text class="live-stat-number">45.2%</text>
              <text class="live-stat-label">转化率</text>
            </view>
          </view>
          <button class="live-button">
            <text class="live-btn-icon fas fa-play"></text>
            <text class="live-btn-text">立即开播</text>
          </button>
        </view>
      </view>

      <!-- Marketing Analytics -->
      <view class="section">
        <view class="section-header">
          <view class="title-bar"></view>
          <text class="section-title">营销效果分析</text>
        </view>
        <view class="analytics-grid">
          <view class="analytics-card">
            <text class="analytics-icon fas fa-chart-line"></text>
            <text class="analytics-label">活动转化率</text>
            <text class="analytics-value">28.5%</text>
            <view class="analytics-trend">
              <text class="trend-icon fas fa-arrow-up"></text>
              <text class="trend-text">+5.2%</text>
            </view>
          </view>
          <view class="analytics-card">
            <text class="analytics-icon fas fa-shopping-cart"></text>
            <text class="analytics-label">活动销售额</text>
            <text class="analytics-value">¥128.5K</text>
            <view class="analytics-trend">
              <text class="trend-icon fas fa-arrow-up"></text>
              <text class="trend-text">+12.8%</text>
            </view>
          </view>
          <view class="analytics-card">
            <text class="analytics-icon fas fa-users"></text>
            <text class="analytics-label">新增客户</text>
            <text class="analytics-value">3,256</text>
            <view class="analytics-trend">
              <text class="trend-icon fas fa-arrow-up"></text>
              <text class="trend-text">+23.5%</text>
            </view>
          </view>
          <view class="analytics-card">
            <text class="analytics-icon fas fa-redo"></text>
            <text class="analytics-label">复购率</text>
            <text class="analytics-value">42.3%</text>
            <view class="analytics-trend">
              <text class="trend-icon fas fa-arrow-up"></text>
              <text class="trend-text">+8.6%</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },

    createFlashSale() {
      uni.showToast({
        title: '创建限时秒杀',
        icon: 'none'
      })
    },

    distributeCoupon() {
      uni.showToast({
        title: '发放优惠券',
        icon: 'none'
      })
    },

    createGroupBuying() {
      uni.showToast({
        title: '创建拼团',
        icon: 'none'
      })
    },

    setFullReduction() {
      uni.showToast({
        title: '设置满减',
        icon: 'none'
      })
    },

    viewAllActivities() {
      uni.showToast({
        title: '查看全部活动',
        icon: 'none'
      })
    },

    viewActivityDetail(activityId) {
      uni.showToast({
        title: `查看活动详情: ${activityId}`,
        icon: 'none'
      })
    },

    editActivity(activityId) {
      uni.showToast({
        title: `编辑活动: ${activityId}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* Header */
.header {
  background: linear-gradient(to right, #f97316, #dc2626);
  padding: 24rpx 32rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.back-button {
  width: 40rpx;
}

.back-icon {
  font-size: 36rpx;
  color: white;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

.history-button {
  width: 40rpx;
  text-align: right;
}

.history-icon {
  font-size: 36rpx;
  color: white;
}

/* Marketing Stats */
.stats-section {
  background: linear-gradient(to right, #f97316, #dc2626);
  padding: 0 32rpx 24rpx;
}

.stats-container {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  padding: 24rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 40rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* Main Content */
.main-content {
  height: calc(100vh - 300rpx);
  padding-bottom: 40rpx;
}

/* Section */
.section {
  padding: 32rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  position: relative;
}

.title-bar {
  width: 8rpx;
  height: 32rpx;
  background-color: #ea580c;
  border-radius: 50rpx;
  margin-right: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.view-all {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
}

.view-all-text {
  font-size: 24rpx;
  color: #f97316;
  margin-right: 8rpx;
}

.view-all-icon {
  font-size: 20rpx;
  color: #f97316;
}

/* Promotion Tools */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.tool-card {
  border-radius: 24rpx;
  padding: 32rpx;
  border: 2rpx solid;
  display: flex;
  flex-direction: column;
}

.flash-sale-card {
  background: linear-gradient(135deg, #fef2f2, #fed7aa);
  border-color: #fed7aa;
}

.coupon-card {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #bfdbfe;
}

.group-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: #bbf7d0;
}

.reduction-card {
  background: linear-gradient(135deg, #fdf4ff, #f3e8ff);
  border-color: #e9d5ff;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.card-icon {
  font-size: 48rpx;
}

.flash-sale-card .card-icon {
  color: #ea580c;
}

.coupon-card .card-icon {
  color: #2563eb;
}

.group-card .card-icon {
  color: #16a34a;
}

.reduction-card .card-icon {
  color: #9333ea;
}

.hot-tag {
  background-color: #dc2626;
  color: white;
  font-size: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 50rpx;
}

.recommend-tag {
  background-color: #16a34a;
  color: white;
  font-size: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 50rpx;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.card-button {
  width: 100%;
  color: white;
  font-size: 24rpx;
  font-weight: 500;
  padding: 16rpx 0;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  border: none;
}

.flash-sale-btn {
  background-color: #f97316;
}

.coupon-btn {
  background-color: #2563eb;
}

.group-btn {
  background-color: #16a34a;
}

.reduction-btn {
  background-color: #9333ea;
}

/* Active Campaigns */
.campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.campaign-card {
  background-color: white;
  border-radius: 16rpx;
  padding: 24rpx;
  border: 2rpx solid #e5e7eb;
}

.campaign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.campaign-info {
  display: flex;
  align-items: center;
}

.campaign-tag {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}

.flash-tag {
  background-color: #fed7aa;
  color: #ea580c;
}

.coupon-tag {
  background-color: #dbeafe;
  color: #2563eb;
}

.tag-icon {
  font-size: 20rpx;
  margin-right: 6rpx;
}

.tag-text {
  font-size: 24rpx;
}

.campaign-time {
  font-size: 24rpx;
  color: #6b7280;
}

.campaign-switch {
  transform: scale(0.8);
}

.campaign-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.campaign-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.stat-text {
  font-size: 24rpx;
  color: #666;
}

.campaign-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 2rpx solid #f3f4f6;
}

.action-btn {
  font-size: 24rpx;
  padding: 0;
  background: none;
  border: none;
  line-height: 1;
}

.detail-btn {
  color: #2563eb;
}

.edit-btn {
  color: #6b7280;
}

/* Live Streaming */
.live-card {
  background: linear-gradient(to right, #9333ea, #ec4899);
  border-radius: 24rpx;
  padding: 32rpx;
  color: white;
}

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.live-info {
  flex: 1;
}

.live-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.live-desc {
  font-size: 24rpx;
  opacity: 0.9;
  display: block;
}

.live-icon-container {
  width: 128rpx;
  height: 128rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-icon {
  font-size: 48rpx;
  color: white;
}

.live-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
  text-align: center;
  margin-bottom: 24rpx;
}

.live-stat-item {
  display: flex;
  flex-direction: column;
}

.live-stat-number {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.live-stat-label {
  font-size: 24rpx;
  opacity: 0.8;
}

.live-button {
  width: 100%;
  background-color: white;
  color: #9333ea;
  font-size: 28rpx;
  font-weight: 600;
  padding: 20rpx 0;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-btn-icon {
  font-size: 24rpx;
  margin-right: 12rpx;
}

.live-btn-text {
  font-size: 28rpx;
}

/* Marketing Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.analytics-card {
  background-color: #f9fafb;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.analytics-icon {
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

.analytics-card:nth-child(1) .analytics-icon {
  color: #2563eb;
}

.analytics-card:nth-child(2) .analytics-icon {
  color: #16a34a;
}

.analytics-card:nth-child(3) .analytics-icon {
  color: #9333ea;
}

.analytics-card:nth-child(4) .analytics-icon {
  color: #ea580c;
}

.analytics-label {
  font-size: 24rpx;
  color: #6b7280;
  margin-bottom: 8rpx;
}

.analytics-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.analytics-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #16a34a;
}

.trend-icon {
  font-size: 20rpx;
  margin-right: 6rpx;
}

.trend-text {
  font-size: 24rpx;
}
</style>
